import React from 'react'
import { useState } from 'react'
import { QRCodeSVG } from 'qrcode.react';
import style from '../styles/lx.module.css'
import { ArrowLeft } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom'
import { useSearchParams } from 'react-router-dom';
import { ShareSheet } from 'react-vant';
export default function List5() {
  
    let navigate = useNavigate()
    const [visible, setVisible] = useState(false)
    let [a,b]=useSearchParams()
    let hh=a.get('hh')
console.log(hh,'555555555555555')
const options = [
  { name: '微信', icon: 'wechat' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
  { name: '分享海报', icon: 'poster' },
  { name: '二维码', icon: 'qrcode' },
]
  return (
    <div className={style.html6}>
        <div className={style.vv}>
                <ArrowLeft onClick={() => navigate(-1)}></ArrowLeft>
                <span style={{ marginLeft: "3.2rem" }} >通行证</span>
            </div>
        <div className={style.e}>
        <QRCodeSVG value="https://reactjs.org/" style={{width: "100%", height: "100%"}} />
       <p style={{fontSize:'.36rem',marginLeft:'.8rem',marginTop:".4rem"}}>{hh}</p>
        </div>
        <div className={`${style.bo5} ${style.content}`}>
        <p style={{ marginLeft: '38%', color: 'white' }} onClick={()=>setVisible(true)}>发送给朋友</p>
      </div>
      <div className={`${style.e2} ${style.content}`}>
        <p style={{ marginLeft: '38%', color: '#3F45FF' }} onClick={() => navigate('/list4')}>继续邀请</p>
      </div>
      <ShareSheet
        visible={visible}
        options={options}
        title='立即分享给好友'
        onCancel={() => setVisible(false)}
        onSelect={(option, index) => {
          console.log('option', option)
          console.log('index', index)
          setVisible(false)
        }}
      />
    </div>
  )
}
